
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>User List</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        /* Add your green style here */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #eaf7e4; /* 浅绿色背景 */
            color: #333; /* 深灰色文字 */
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4caf50; /* 深绿色头部背景 */
            color: #fff; /* 白色文字 */
            text-align: center;
            padding: 1em;
        }

        section {
            margin: 20px;
        }

        .progress-container {
            background-color: #dff0d8; /* 淡绿色进度容器背景 */
            padding: 20px;
            border-radius: 10px;
        }

        .progress-item {
            margin-bottom: 15px;
        }

        footer {
            background-color: #4caf50; /* 深绿色底部背景 */
            color: #fff; /* 白色文字 */
            text-align: center;
            padding: 1em;
            position: fixed;
            bottom: 0;
            width: 100%;
            }
        table.providerTable {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        
        table.providerTable th, table.providerTable td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        table.providerTable th {
            background-color: #4CAF50; /* green header */
            color: white;
        }
    </style>
</head>
<body>
    <header>
        <h1>维权进度追踪管理后台</h1>
    </header>
    <table class="providerTable" cellpadding="0" cellspacing="0">
        <tr class="firstTr">
            <th width="10%">用户编号</th>
            <th width="20%">用户名称</th>
            <th width="25%">申请状态</th>
            <th width="25%">审核状态</th>
            <th width="20%">处理结果</th>
        </tr>
        <tbody id="userTableBody"></tbody>
    </table>

    <script>
        $(document).ready(function () {
            // Use Ajax to fetch data and render the table
            $.ajax({
                url: 'trackclaimmangenservlet',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    console.log('data:', data);

                    // Clear existing table rows
                    $('#userTableBody').empty();

                    // Populate the table with fetched data
                    $.each(data, function (index, item) {
                        var row = '<tr>' +
                            '<td>' + item.id + '</td>' +
                            '<td>' + item.username + '</td>' +
                            '<td>' + item.status + '</td>' +
                            '<td>' + item.reviewStatus + '</td>' +
                            '<td>' + item.result + '</td>' +
                            '<td>' +
                            '<a href="getclaimidservlet?claimid=' + item.id + '"><img src="img/xiugai.png" alt="修改" title="修改"/></a>' +
                            '<a class="removeUser" href="claimdeleteservlet?claimid=' + item.id + '"><img src="img/schu.png" alt="删除" title="删除"/></a>' +
                            '</td>' +
                            '</tr>';

                        $('#userTableBody').append(row);
                    });
                },
                error: function (error) {
                    console.log('Error fetching user data: ', error);
                }
            });
        });
    </script>

</body>
</html>